<template>
  <div class="page-container main">
    <div class="tool-container">
      <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item>
          <el-input type="input" placeholder="openid" v-model="queryParams.openId" />
        </el-form-item>
        <el-form-item>
          <!-- <el-form-item>
            <el-date-picker v-model="queryParams.createTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item> -->
          <el-form-item>
            <el-select v-model="queryParams.status" placeholder="状态">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="tabel-container myTable">
      <vxe-table ref="tableRef" :data="tableData" v-loading="loading">
        <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable></vxe-table-column>
        <vxe-table-column :resizable="true" field="openid" title="openID" sortable width="250"> </vxe-table-column>
        <vxe-table-column :resizable="true" field="" title="电话" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="claimTime" title="时间" width="150" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="result" title="结果" sortable>
          <template #default="{ row }">
            <el-tag v-if="row.status == 1" type="success">领取成功</el-tag>
            <el-tag v-else-if="row.status == 0" type="danger">领取失败</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="couponId" title="劵ID" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="validTime" title="有效期起止" sortable width="300">
          <template #default="{ row }"> {{row.validTime}} - {{row.expireTime}} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="" title="状态" sortable>
          <template #default="{ row }">
            <el-tag v-if="row.status == 1" type="success">正常</el-tag>
            <el-tag v-else-if="row.status == 0" type="danger">作废</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="used" title="使用否" sortable>
          <template #default="{ row }">
            <el-tag v-if="row.used == 1" type="info">是</el-tag>
            <el-tag v-else-if="row.used == 0" type="primary">否</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="redeemOrderId" title="关联订单号" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="choosePrice" title="订单金额(元)" sortable>
          <template #default="{ row }">
            {{row.choosePrice/100}}
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <div class="myPager">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script lang="ts">
import { couponList } from '@/api/operation/activity/index';

export default {
  props: {
    data: {}
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 1,
      queryParams: {
        status: null,
        openid: null,
        createTime: null,
        pageNum: 1,
        pageSize: 20
      },
      status: [
        { label: '正常', value: '1' },
        { label: '作废', value: '0' }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init(data) {
      if (data == null) data = this.data;
      let id = data.activityId;
      this.queryParams.activityId = id;
      this.getList();
    },

    handleQuery() {
      this.queryParams.pageSize = 1;
      this.getList();
    },
    /**
     * 查询数据
     */
    getList() {
      this.loading = true;
      couponList(this.queryParams).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.tableData = res.rows;
        } else {
          ElMessage.error(res.msg);
        }
      });
    },

    /**
     * 匹配结果
     */
    marchType(value, types) {
      for (let i = 0; i < types.length; i++) {
        let type = types[i];
        if (type.value == value) return type.label;
      }
    }
  }
};
</script>
